<template>
    <section>
        <!--工具条-->
        <el-row :gutter="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="deskModel">
                <el-form-item>
                    <el-input type="number" min="1" v-model="deskModel.deskNo" placeholder="台球卓号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select
                            clearable
                            v-model="deskModel.deskType"
                            placeholder="类型">
                        <el-option v-for="(item,index) in static.deskType"
                                   :key="index"
                                   :value="item.dataId"
                                   :label="item.dataName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="searchClick">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="default" v-on:click="resetClick">重置</el-button>
                </el-form-item>
                <el-form-item style="float:right;" >
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-table :data="tableData"
                  highlight-current-row
                  v-loading="listLoading"
                  @selection-change="celsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column min-width="120" label="台球桌号" prop="deskNo" ></el-table-column>
            <el-table-column min-width="120" label="台球卓名" prop="deskName" ></el-table-column>
            <el-table-column min-width="120" label="类型" prop="deskType" >
                <template slot-scope="scope">
                    {{scope.row.deskType | toCase(static.deskType,'dataId', 'dataName')}}
                </template>
            </el-table-column>
            <el-table-column min-width="120" label="价格" prop="price" ></el-table-column>
            <el-table-column min-width="120" label="当前状态" prop="status" >
                <template slot-scope="scope">
                    {{scope.row.status | toCase(static.status,'dataId', 'dataName')}}
                </template>
            </el-table-column>
            <el-table-column min-width="120" label="总收入(元)" prop="totalIncome" ></el-table-column>
            <el-table-column min-width="140" label="总开卓时长(小时)" prop="totalTime" ></el-table-column>
            <el-table-column label="操作" width="240" fixed="right" >
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.status == 2" type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button type="success" size="small" @click="handleGameLog(scope.$index, scope.row)">查看记录</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                       @current-change="handleCurrentChange"
                       layout="total,prev, pager, next,jumper"
                       :page-size="page.size"
                       :total="page.total"
                       style="float:right;">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
               <el-row :gutter="24" >
                   <el-col :span="22" >
                       <el-form-item label="台球卓名:" prop="name">
                           <el-input  v-model="editForm.deskName" auto-complete="off"></el-input>
                       </el-form-item>
                   </el-col>
               </el-row>
                <el-row :gutter="24" >
                   <el-col :span="22" >
                       <el-form-item label="台球卓号:" prop="deskNo">
                           <el-input :disabled="opr != 'add'" type="number" min="1" v-model="editForm.deskNo" auto-complete="off"></el-input>
                       </el-form-item>
                   </el-col>
               </el-row>
                <el-row :gutter="24" >
                    <el-col :span="22" >
                        <el-form-item label="类型:" prop="deskType"  >
                            <el-select v-model="editForm.deskType" :multiple="false" style="width: 100%">
                                <el-option
                                v-for="(item,index) in static.deskType"
                                :key="index"
                                :value="item.dataId"
                                :label="item.dataName"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24" >
                    <el-col :span="22" >
                        <el-form-item label="价格:" prop="price">
                            <el-input type="number" min="1" v-model="editForm.price" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24" >
                    <el-col :span="22" >
                        <el-form-item label="状态:" prop="status">
                            <el-radio-group v-model="editForm.status" style="width: 100%" >
                                <el-radio style="margin-right: 8%"
                                          v-for="(item,index) in static.status"
                                          :disabled="item.dataId == 2"
                                          :key="index"
                                          :label="item.dataId" >{{item.dataName}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button v-if="opr=='add'" type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
                <el-button v-if="opr=='edit'" type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>

</template>

<script>
    import {getDeskListPage,addDesk,updateDesk,deleteDesk} from '../../api/api';
    export default {
        name: "Desk",
        data(){
            return {
                page:{
                    current:1,
                    total:0,
                    size:12
                },
                deskModel:{
                    deskNo:null,
                    deskType:null,
                },
                listLoading:false,
                tableData:[],
                cels:[],
                static:{
                    status:[
                        {
                            dataId:0,
                            dataName:'未开启'
                        },
                        {
                            dataId:1,
                            dataName:'休息中'
                        },
                        {
                            dataId:2,
                            dataName:'运行中'
                        },
                        {
                            dataId:3,
                            dataName:'故障'
                        }
                    ],
                    deskType:[
                        {
                            dataId:1,
                            dataName:'普通'
                        },
                        {
                            dataId:2,
                            dataName:'包厢'
                        },
                    ]
                },
                opr:'add',
                editFormVisible:false,
                editForm:{
                    id:null,
                    deskName:null,
                    deskNo:null,
                    deskType:null,
                    price:null,
                    status:1
                },
                editFormRules:{
                    deskNo:[{required:true,message:'请输入桌号',trigger:'change'}],
                    deskType:[{required:true,type:'number',message:'请选择类型',trigger:'change'}],
                    price:[{required:true,message:'请输入价格',trigger:'change'}],
                    status:[{required:true,type:'number',message:'请选择状态',trigger:'change'}]
                },
                editLoading:false
            }
        },
        methods:{

            addSubmit(){
                let _this = this
                this.editOrUpdatePost('add',function (resp) {
                    if(resp.code == '200'){
                        _this.$message.success('新增成功')
                        _this.editFormVisible = false
                        _this.search()
                    }else{
                        _this.$message.error(resp.msg)
                    }
                })
            },

            editSubmit(){
                let _this = this
                this.editOrUpdatePost('edit',function (resp) {
                    if(resp.code == '200'){
                        _this.$message.success('修改成功')
                        _this.editFormVisible = false
                        _this.search()
                    }else{
                        _this.$message.error(resp.msg)
                    }
                })
            },

            editOrUpdatePost(opr,callback){
                this.$refs.editForm.validate( valid =>{
                    if(valid){
                        if(this.opr == 'edit'){
                            updateDesk(this.editForm).then(resp =>{
                                callback(resp)
                            })
                        }else{
                            addDesk(this.editForm).then(resp =>{
                                callback(resp)
                            })
                        }
                    }
                })
            },

            handleCurrentChange(val){
                this.page.current = val
                this.search()
            },

            handleGameLog(index,row){
                this.$router.push({
                    path:'/desks/gameLog',
                    query:{
                        deskId:row.id
                    }
                })
            },

            handleAdd(){
                this.opr = 'add'
                this.editForm.id = null
                this.editFormVisible = true
                this.editForm.deskName = null
                this.editForm.status = 1
                this.editForm.price = null
                this.editForm.deskNo = null
                this.editForm.deskName = null
                this.editForm.deskType = null
                if(this.$refs.editForm){
                    this.$refs.editForm.resetFields()
                }
            },

            handleEdit: function (index, row) {
                this.editForm = JSON.parse(JSON.stringify(row))
                if(this.editForm.deskNo){
                    this.editForm.deskNo = this.editForm.deskNo+''
                }
                if(this.editForm.price){
                   this.editForm.price =  this.editForm.price+''
                }
                if(this.editForm.status){
                    this.editForm.status = parseInt(this.editForm.status)
                }
                this.opr = 'edit'
                this.editFormVisible = true
            },

            handleDel(index,row){
                this.$confirm('确认删除该桌子吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    deleteDesk({id:row.id}).then(resp =>{
                        if(resp.data.code == '200'){
                            this.$message.success("删除成功")
                            this.search()
                        }
                    })
                }).catch((e) => {
                    this.$message({
                        message: e,
                        type: 'error'
                    });
                });
            },

            celsChange(value){
                this.cels = value
            },

            resetClick(){
                this.page.current = 1
                this.deskModel.deskType = null
                this.deskModel.deskNo = null
                this.search()
            },
            searchClick(){
                this.page.current = 1
                this.search()
            },


            search(){
                let params = {
                    page:this.page.current,
                    rowSize:this.page.size,
                    deskNo:null,
                    deskType:null
                }
                if(this.deskModel.deskNo){
                    params.deskNo = this.deskModel.deskNo
                }
                if(this.deskModel.deskType){
                    params.deskType = this.deskModel.deskType
                }
                this.listLoading = true;
                getDeskListPage(params).then( resp => {
                    console.log(resp,'rsp')
                    if(resp.data.code == 200){
                        this.listLoading = false
                       this.tableData = resp.data.data.records
                       this.page.total = resp.data.data.total
                        console.log(this.tableData)
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }
        },
        created() {
            this.search()
        }
    }
</script>

<style scoped>

</style>